<script setup lang="ts">
import { defineEmits } from 'vue'
import type { Direction } from '../types'

const emit = defineEmits<{
  (e: 'move', direction: Direction): void
}>()

function onMove(direction: Direction) {
  emit('move', direction)
}
</script>

<template>
  <div class="mobile-controls" role="group" aria-label="移动控制按钮">
    <el-button
      aria-label="旋转"
      class="btn btn-up"
      circle
      type="primary"
      @click="onMove('rotate')"
    >
      ⟳
    </el-button>

    <div class="row">
      <el-button
        aria-label="向左移动"
        class="btn btn-left"
        circle
        type="primary"
        size="small"
        @click="onMove('left')"
      >
        ←
      </el-button>

      <el-button
        aria-label="向下移动"
        class="btn btn-down"
        circle
        type="primary"
        size="small"
        @click="onMove('down')"
      >
        ↓
      </el-button>

      <el-button
        aria-label="向右移动"
        class="btn btn-right"
        circle
        type="primary"
        size="small"
        @click="onMove('right')"
      >
        →
      </el-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.mobile-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 360px;
  user-select: none;

  .row {
    display: flex;
    justify-content: center;
    gap: 10px;
    width: 100%;
  }

  .btn {
    background: linear-gradient(135deg, #29b6f6, #0288d1);
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 1.8rem;
    width: 56px;
    height: 56px;
    box-shadow: 0 4px 12px rgba(2, 136, 209, 0.7);
    cursor: pointer;
    transition:
      background 0.25s ease,
      transform 0.15s ease;

    &:hover {
      background: linear-gradient(135deg, #40c4ff, #03a9f4);
      transform: translateY(-2px);
    }

    &:active {
      transform: translateY(0);
      box-shadow: 0 2px 6px rgba(2, 136, 209, 0.9);
    }
  }

  .btn-up {
    width: 64px;
    height: 64px;
    font-weight: 700;
  }
}
</style>
